<template>
  <view :class="ggclass" class="data-box" :style="[styles]" @click="ontap">
    <slot></slot>
  </view>
</template>

<script setup lang="ts">
// @ts-ignore
import propsMixin from "../mixins/props/index";
import {
  defineProps,
  computed,
  getCurrentInstance,
  unref,
  toRefs,
  reactive,
  type StyleValue,
} from "vue";
let { proxy } = getCurrentInstance() as any;
let props = defineProps({
  ...propsMixin.props,
  background: {
    type: String,
    default: "",
  },
  padding: {
    type: String,
    default: "",
  },
  backgroundSize: {
    type: String,
    default: "100% 100%",
  },
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  radius: {
    type: String,
    default: "",
  },
  flex: {
    type: String,
    default: "",
  },
  jc: {
    type: String,
    default: "",
  },
  boxShadow: {
    type: String,
    default: "",
  },
});
let { ggclass } = toRefs(props);
let computedBgColor = computed(() => {
  if (
    props.background.includes("data") ||
    props.background.includes("http") ||
    props.background.includes("static")
  ) {
    return `url(${props.background})`;
  } else {
    console.log(props.isOpenPattern, "props.isOpenPattern");
    console.log(props.background, "props.background");
    console.log(proxy.$color.theme, "proxy.$color.theme------------");
    let boxBgColor = proxy.$color.theme.boxBgColor;
    return props.background || boxBgColor;
  }
});

let styles: any = computed(() => {
  return {
    background: computedBgColor.value,
    width: proxy.$rpxunit(props.width),
    height: proxy.$rpxunit(props.height),
    borderRadius: proxy.$rpxunit(props.radius),
    padding: props.padding
      .split(" ")
      .map((v: string) => proxy.$rpxunit(v))
      .join(" "),
    //@ts-ignore
    color: props.computedColor,
    backgroundSize: props.backgroundSize,
    justifyContent: props.jc,
    flexDirection: props.flex,
    boxShadow: props.boxShadow,
  };
});
let ontap = (e: Event) => {
  proxy.$emit("click", e);
  proxy.$emit("tap", e);
};
</script>

<style lang="scss" scoped>
.data-box {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  border-radius: 30rpx;
  position: relative;
  overflow: hidden;
  // background: #fff;
  padding: 30rpx 25rpx;
  box-shadow: 0rpx 0rpx 10rpx 1rpx rgba(200, 200, 200, 0.3);
}
</style>